<!DOCTYPE html>
<html lang="en">
   <!-- 公立学校第四套 1-1 -->

<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <link rel="stylesheet" href="../css/bootstrap4.5.min.css">
   <link rel="stylesheet" href="../css/swiper-bundle.min.css">
   <link rel="stylesheet" href="../css/public.css">
   <style>
      .imgText_list_box {
         display: flex;
         flex-wrap: wrap;
      }

      .imgText_list_right_list {
         flex: 50%;
      }

      .imgText_list_right_list li {
         transition: all .4s ease-out;
         flex: 50%;
         padding: 10px 12.5px;
      }

      .imgText_list_right_list li:hover .imgText_list_right_list_item img {
         transform: scale(1.1);
      }

      .imgText_list_right_list_item {
         overflow: hidden;
      }

      .imgText_list_right_list_item img {
         width: 100%;
         height: 283px;
         object-fit: cover;
         transition: all .4s ease-out;

      }

      @media screen and (max-width:768px) {
         .imgText_list_box {
            padding: 0 20px;
         }

         .imgText_list_right_list {
            padding-top: 20px;
         }

         .imgText_list_right_list ul {
            margin-left: -6px;
            margin-right: -6px;
         }

         .imgText_list_right_list li {
            padding: 6px;
         }

         .imgText_list_right_list_item img {
            height: 117px;

         }
      }

      .imgText_list_left_list {
         flex: 50%;
         padding-top: 105px;
         padding-left: 100px;
      }

      .imgText_list_left_list_item,
      .imgText_list_left_list .public_title {
         max-width: 567px;
      }

      .imgText_list_left_list_item {
         padding-top: 50px;
         transition: all .4s ease-out;
      }

      .imgText_list_left_list li {
         padding-left: 0;
         padding-right: 0;
         flex: 50%;
      }

      .imgText_list_left_list_item_conten span {
         color: var(--c_tips);
         font-size: var(--f_describe);
         line-height: var(--l_describe);

      }

      .imgText_list_left_list_item_bottom span {
         font-size: 20px;
         line-height: 26px;
         color: #999;
         transition: .5s;
      }

      @media screen and (max-width:768px) {
         .imgText_list_title {
            margin-bottom: 5px;
            padding: 0;
         }

         .imgText_list_left_list {
            flex: 100%;
            padding-top: 0px;
            padding-left: 0px;
         }


         .imgText_list_left_list_item {
            padding: 0;
         }

         .imgText_list_left_list li {
            padding-left: 0;
            padding-right: 0;
            flex: 100%;
         }

         .imgText_list_left_list_item_conten span {
            -webkit-line-clamp: 3;

         }

         .imgText_list_left_list_item_bottom {
            margin-top: 32px;
         }

         .imgText_list_left_list_item:hover {
            box-shadow: 0 0 0 0;
         }
      }

      /* 布局1 */
      .layout1 {}

      /* 布局2 */
      .layout2 .imgText_list_box {
         flex-direction: row-reverse;
      }

      /* 布局3 */
      .layout3 .imgText_list_box {
         flex-direction: column;
         max-width: 1400px;
         margin: 0 auto;
      }
      .layout3 .imgText_list_left_list{
         padding-left: 0;
         padding-top: 0px;
      }
      .layout3 .imgText_list_left_list_item{
         padding-top: 0;
         padding-bottom: 60px;
      }
      .layout3 .imgText_list_left_list_item,
      .layout3 .imgText_list_left_list .public_title {
         margin-left: auto;
         margin-right: auto;
         text-align: center;
         max-width: 567px;

      }
      /* 布局4 */
      .layout4 .imgText_list_box {
         flex-direction: column-reverse;
         max-width: 1400px;
         margin: 0 auto;
      }
      .layout4 .imgText_list_left_list{
         padding-left: 0;
         padding-top: 60px;
      }
      .layout4 .imgText_list_left_list_item{
         padding-top: 0;
         padding-bottom: 60px;
      }
      .layout4 .imgText_list_left_list_item,
      .layout4 .imgText_list_left_list .public_title {
         margin-left: auto;
         margin-right: auto;
         text-align: center;
         max-width: 567px;

      }

   </style>
   <script src="../js/jquery-3.5.1.min.js"></script>
   <script src="../js/bootstrap4.5.min.js"></script>
   <script src="../js/swiper-bundle.min.js"></script>

</head>

<body>
   <div class="imgText_list layout4 title_left modular">
      <div class="">
         <div class="imgText_list_box">
            <div class="imgText_list_left_list">
               <div class="public_title">
                  <h2>Primary<br>
                     school</h2>
               </div>
               <div class="imgText_list_left_list_item">
                  <div class="imgText_list_left_list_item_conten">
                     <span>6月19日，主题为“拨云·见日”的“一起拍电影权力榜”颁奖典礼在上海举行。典礼上，荣膺“具有影响力电影出品公司”，导演也凭借影片获“具有商业价值导演”荣誉。副董事长、CEO先生作为特别嘉宾出席并致辞。他首先感谢了大家的关注和认可，并表示行业近期遭遇了一系列过度解读…</span>
                  </div>
               </div>
            </div>
            <div class="imgText_list_right_list">
               <ul class="row">
                  <li>
                     <div class="imgText_list_right_list_item">
                        <img src="../images/img_collection_4.webp" alt="">
                     </div>
                  </li>
                  <li>
                     <div class="imgText_list_right_list_item">
                        <img src="../images/img_collection_4.webp" alt="">
                     </div>
                  </li>
                  <li>
                     <div class="imgText_list_right_list_item">
                        <img src="../images/img_collection_4.webp" alt="">
                     </div>
                  </li>
                  <li>
                     <div class="imgText_list_right_list_item">
                        <img src="../images/img_collection_4.webp" alt="">
                     </div>
                  </li>

               </ul>
            </div>
         </div>

      </div>

   </div>

</body>

</html>